const path =require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports ={
  //模式 两个值 production(生产环境) development(开发环境)  
  mode:'production',
   entry:path.join(__dirname,'src/main.js'),
  //配置入口 
  output:{
    path:path.join(__dirname,'dist'),
    filename:'bundle.js'
  },
  // 配置单出口
  /* entry:{
    entry1:path.join(__dirname,'src/main.js'),
    entry2:path.join(__dirname,'src/main2.js'),
  },
  output:{
    path:path.join(__dirname,'dist'),
    filename:'[name].[hash:[数字,hash的长度]].js'
  }
  //配置多入口 多出口 */

  //插件的配置
  plugins: [
    new HtmlWebpackPlugin({
      //插件模板
      template: path.join(__dirname,'src/public/index.html'),
      //指定模板的位置
      title:'你好'
      //html 的标题标签可以直接使用<%= htmlWebpackPlugin.options.title %> 显示title里的内容
    }),
    new CleanWebpackPlugin()
    // 删除上一次解析的文件 生成新的文件
  ],

  module: {
    //不同的loader的配置规则
    rules: [
      { test: /\.css$/,
        //  use: 'css-loader' 
        //  直接使用loader，用于只有一个loader
        use:[
          'style-loader',     //  将css文件作为一个内部样式表插入
          'css-loader',          //将引入到js中的css文件 编译成css文件 ，让js识别css
        ]
        //需要使用多个loader时，执行的顺序是从后往前
        },
        {
          test: /\.less$/,
          use:[
            'style-loader',       //  将css文件作为一个内部样式表插入
            'css-loader',          //将引入到js中的css文件 编译成css文件 ，让js识别css
            'less-loader'         //将less解析成css文件
          ]
        },
        {
          test: /\.m?js$/,
          exclude: /node_modules/,  //exclude 不解析这个文件下的所有js文件
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', { targets: "defaults" }]
              ]
            }
          }
            //es6转es5
        },
        /* {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {        //options 定义导出文件的名字
                name: 'imgs/[name].[hash].[ext]',   //ext变量代表后缀名
              },
            },
          ],
          //解析静态资源
        } */
        {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10240,    //指定转换成base资源体积 低于这个数值转成base64  超出直接压缩扔到dist目录里
                fallback:{
                  loader: 'file-loader',
                  options: {  
                    name: 'imgs/[name].[hash].[ext]', 
                  }, 
                }
              },
            },
          ],
          //解析静态资源  常用
        },
      
    ]
  },
  devServer:{
    contentBase:path.join(__dirname,'dist'),  //指定服务器监听的根目录
    port:9527,    //端口
    open:true,     //自动打开浏览器
    hot:true,      //是否热加载
    compress:true    //是否开启gzip压缩  提高网页的性能
  }
}

